<template>
  <div style="padding: 20px 30px">
    <div style="font-weight: 600">个人中心</div>
    <el-divider border-style="double" />
    <div>
      <el-form :data="user" :label-width="90">
        <el-form-item label="用户名:"
          ><span>{{ userData.username }}</span></el-form-item
        >
        <el-form-item label="手机号码:"
          ><span>{{ userData.phone }}</span></el-form-item
        >
        <el-form-item v-if="userData.sex!==undefined&&userData.sex!==null" label="性别:"
          ><span>{{ userData.sex == 1 ? "男" : "女" }}</span>
          </el-form-item>
        <el-form-item v-if="userData.idNumber" label="身份证号码:"
          ><span>{{ userData.idNumber }}</span></el-form-item
        >
        <el-form-item v-if="userData.avatar" label="图片:"
          ><el-image
            style="width: 100px; height: 100px"
            :src="userData.avatar"
            :fit="fit"
        /></el-form-item>
      </el-form>
      <el-button
        @click="
          userDialog = true;
          user = JSON.parse(JSON.stringify(userData));
        "
        type="primary"
        >修改基础信息</el-button
      >
    </div>
    <el-dialog
      v-model="userDialog"
      title="修改"
      center
      :close-on-click-modal="false"
      width="30%"
      :show-close="false"
      @close="dialogClose(userRef)"
    >
      <el-form
        :label-width="100"
        :model="user"
        ref="userRef"
        :rules="userRules"
      >
        <el-form-item prop="username" label="用户名:">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码:">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别:">
          <el-radio-group v-model="user.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="idNumber" label="身份证号码:">
          <el-input
            placeholder="请输入身份证号码"
            v-model="user.idNumber"
          ></el-input>
        </el-form-item>
        <el-form-item prop="avatar" label="头像:">
          <Image @imageValue="userAvatar" :images="user.avatar"></Image>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit(userRef)">
            {{ "确认" }}
          </el-button>
          <el-button @click="userDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script scope>
import { reactive, toRefs } from "vue";
import { userInfo, updateInfo } from "@/api/userRegister";
import Image from "@/components/img/image.vue";
import { displayBoxInfo } from "@/utils/msg";
import { ElMessage } from "element-plus";
export default {
  name: "personalCenter",
  components: { Image },
  setup() {
    let data = reactive({
      userDialog: false,
      userRef: "",
      userData: "",
      user: {
        username: "", //用户名
        phone: "", //手机号码
        sex: "", //性别
        idNumber: "", //身份证号码
        avatar: "", //图片
      },
      userRules: {
        username: { required: true, message: "请输入用户名", trigger: "blur" },
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        sex: { required: true, message: "请选择性别", trigger: "blur" },

        idNumber: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            pattern:
              /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
            message: "联系人身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        // avatar: { required: true, message: "" },
      },
    });

    let info = () => {
      userInfo({ id: JSON.parse(localStorage.getItem("userInfo")).id }).then(
        (res) => {
          data.userData = res.data;
        }
      );
    };
    info();

    let submit = (formEl) => {
      if (!formEl) return;
      formEl.validate((valid, fileds) => {
        if (valid) {
          try {
            if (!data.user.avatar) {
              throw "请上传营业执照图片";
            } else {
              updateInfo(data.user).then((res) => {
                displayBoxInfo(res.code, res.msg);
                if (res.code == 1) {
                  data.userDialog = false;
                  info();
                }
              });
            }
          } catch (err) {
            ElMessage({
              type: "warning",
              message: err,
            });
          }
        } else {
          console.log(fileds);
        }
      });
    };

    let userAvatar = (n) => {
      data.user.avatar = n;
    };

    //关闭弹框,实现重置和清除校验结果
    let dialogClose = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    return {
      ...toRefs(data),
      userAvatar,
      dialogClose,
      submit,
      info,
    };
  },
};
</script>

<style>
.el-divider--horizontal {
  margin: 14px 0;
}


</style>